<template>
  <header>
    <section>
      <!-- 阻止表单的默认提交事件 -->
      <form @submit.prevent>
        <label for="title">ToDoList</label>
        <input type="text" placeholder="添加ToDo" v-model="text" @keydown.enter="add()" />
      </form>
    </section>
  </header>
</template>
<script>
import { ref } from 'vue'
export default {
  setup(props, context) {
    // console.log(context);
    let text = ref('')
    function add() {
      if (text.value.trim() === '') {
        text.value = ''
        return alert('还没有数据请添加！')
      } else {
        // 子传父
        context.emit('toparent', text.value)
        text.value = ''
      }
    }
    return {
      text,
      add
    }
  },
}
</script>
<style></style>
